<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        div{
            padding:8px;
            width: 180px;
        }
        .blue{background: blue;}
            
        .larger{font-size: 30px;}
        .green {background : green;}
    </style>
</head>

<body>

    <h3>css()方法设置元素样式</h3>
    <div id="conblue" class="blue larger">天蓝色</div>
    <div id="conred">大红色</div>
    <div id="remove" class="blue larger">天蓝色</div>
</body>


    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        var cla =$('#conblue').attr('class')
        console.log(cla)
        $('#conblue').attr('class','green')//原本的样式被覆盖
        $('#conblue').addClass('larger')//在原本的基础上添加样式，若样式相同，则按最后添加的为准
        $('#conred').css({'background':'red','font-size':'40px'})//添加具体样式
        $('#remove').removeClass('larger')//移除样式，若样式不存在，则无效果
    </script>
</html>